<template>
	<view class="wallet-box">
		<!-- 红色部分 -->
		<view class="content-box">
			<view class="title">
				永顺园垂钓俱乐部
			</view>
			<view class="flex-between" style="align-items: center;">
				<!-- 余额 -->
				<view style="margin-bottom: 15px;width:fit-content">
					<view class="flex-start" style="align-items: center;margin-bottom: 5px;">
						<text>账户余额(元)</text>
						<image src="../../../static/wallet/eye.png" mode=""
							style="width:16px;height: 16px;margin-left: 5px;" />
					</view>
					<view style="font-size: 25px;">
						{{accountBalance}}
					</view>
				</view>
				<!-- 提现 -->
				<view class="flex-start" style='width:fit-content'>
					<view class="whiteBtn" @click="toWithdrawal">提现</view>
					<view class="whiteBtn" style="margin-right: 0;" @click="toRecharge">充值</view>
				</view>
			</view>
			<view class="line">
			</view>
			<view class="flex-between">
				<!-- 可提现 -->
				<view class="withdrawal">
					<view style="margin-bottom: 5px;">可提现金额(元)</view>
					<view style="font-size: 20px;">{{ableWithdrawal}}</view>
				</view>
				<!-- 已收鱼 -->
				<view class="withdrawal" style="margin-right: 15px;">
					<view style="margin-bottom: 5px;align-items: center;" class="flex-start">
						<text>已收鱼未结账金额(元)</text><uni-icons type="right" size="16" style="color:#fff"></uni-icons></view>
					<view style="font-size: 20px;">{{notReceivedYet}}</view>
				</view>
			</view>


		</view>
		<!-- 白色部分 -->
		<view class="flex-center white-box">
			<view class="flex-center" style="align-items: center;flex:1" @click="toIncomeDetail">
				<image src="../../../static/wallet/incomeDetail.png" mode=""
					style="width: 18px;height: 18px;margin-right: 5px;" />
				<view style="color:#000">收支明细</view>
			</view>
			<image src="../../../static/wallet/bar.png" mode="" style="width: 9px;height: 28px;" />
			<view class="flex-center" style="align-items: center;flex:1" @click="toWithdrawalRecord">
				<image src="../../../static/wallet/Withdrawal.png" mode=""
					style="width: 18px;height: 18px;margin-right: 5px;" />
				<view style="color:#000">提现记录</view>
			</view>
		</view>

	</view>
</template>

<script>
	import {
		get_business_wallet
	} from '@/utils/siteAccountApi/index.js'
	export default {
		data() {
			return {
				accountBalance: '0',
				ableWithdrawal: '0',
				notReceivedYet: '0'
			};
		},
		methods: {
			// 去充值
			toRecharge() {
				wx.navigateTo({
					url: `/pages/fashingSite/siteAccount/recharge`,
				})
			},
			// 去提现
			toWithdrawal() {
				uni.navigateTo({
					url: `/pages/fashingSite/siteAccount/withdrawal`,
				})
			},
			//去收支明细
			toIncomeDetail() {
				uni.navigateTo({
					url: `/pages/fashingSite/siteAccount/incomeDetail`,
				})
			},
			//去提现记录
			toWithdrawalRecord() {
				uni.navigateTo({
					url: `/pages/fashingSite/siteAccount/withdrawalRecord`,
				})
			},
		},

		onReady() {
			// uni.setStorage({
			//   key: 'userInfo',
			//   data:{business_id:1},
			// });
			get_business_wallet({}).then(res => {
				if (res.code == 200) {
					let balance_list = res.balance_list
					this.accountBalance = balance_list[0].value
					this.ableWithdrawal = balance_list[1].value
					this.notReceivedYet = balance_list[2].value
				}
			})

		}

	}
</script>

<style lang='scss' scoped>
	.wallet-box {
		/* width: 100%; */
		padding-top: 20px;
		/* border-radius: 10px; */
		box-sizing: border-box;
		margin-bottom: 45px;
		background: #F3F4F6;
		height: 100vh;
		position: relative;
	}

	/* 
	.page-content {
		background: #F3F4F6;
		height: 100vh;
	} */

	.content-box {
		border-radius: 10px;
		background: linear-gradient(134.56deg, rgba(230, 16, 16, 1) 0%, rgba(212, 48, 48, 0.53) 48.51%, rgba(230, 16, 16, 1) 100%);
		box-shadow: 0px 10px 8px rgba(52, 52, 52, 0.2);
		padding: 20px 15px;
		margin: 0 15px;
		margin-right: 15px;
		margin-bottom: 0px;

		color: #fff;
		font-size: 14px;
		box-sizing: border-box;
		width: calc(100% - 30px);
		position: absolute;
		z-index: 2;
	}

	.white-box {
		background: #fff;
		padding: 20px 0;
		padding-top: 25px;
		margin: 0 15px;
		font-weight: 600;
		font-size: 15px;
		align-items: center;
		border-radius: 10px;
		position: absolute;
		z-index: 1;

		box-sizing: border-box;
		width: calc(100% - 30px);
		top: 230px;
	}

	.line {
		border: 1px solid rgba(255, 255, 255, 0.5);
		margin-bottom: 15px;
	}

	.whiteBtn {
		width: fit-content;
		height: 30px;
		padding: 0 20px;
		font-weight: 600;
		background-color: #fff;
		color: rgba(230, 16, 16, 1);
		display: flex;
		justify-content: center;
		align-items: center;
		border-radius: 30px;
		margin-right: 15px;
	}

	.flex-center {
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.title {
		font-size: 20px;
		margin-bottom: 15px
	}
</style>